<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待处理订单</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5deb3; /* 浅米色背景 */
            color: #333;
        }
        table {
            width: 90%;
            margin: 50px auto;
            border-collapse: collapse;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        th {
            background-color: #d7be8b; /* 赭石色背景 */
            color: white;
            font-weight: bold;
            text-transform: uppercase;
        }
        .order-status {
            text-align: center;
        }
        button {
            background-color: #d7be8b; /* 按钮颜色与标题背景一致 */
            color: white;
            border: none;
            padding: 6px 12px;
            cursor: pointer;
            margin-right: 5px;
        }
        button:hover {
            background-color: #dab052; /* 悬停时加深按钮颜色 */
        }
    </style>
</head>
<body>
<h1>待处理订单</h1>
<table>
    <thead>
    <tr>
        <th>用户名</th>
        <th>创建时间</th>
        <th>结束时间</th>
        <th>目的地</th>
        <th>订单状态</th>
        <th>是否接单</th>
    </tr>
    </thead>
    <tbody id="ordersList">
    <!-- 动态内容将通过JavaScript填充此处 -->
    </tbody>
</table>

<script>
    async function fetchOrdersList() {
        try {
            const response = await fetch('http://localhost:8080/keeper/order/getUnfinishOrderList');
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const ordersData = await response.json();
            populateOrdersTable(ordersData);
        } catch (error) {
            console.error('Fetch problem:', error);
            document.getElementById('ordersList').innerHTML = "<tr><td colspan='5'>获取订单列表失败，请重试。</td></tr>";
        }
    }

    function populateOrdersTable(orders) {
        const ordersList = document.getElementById('ordersList');
        ordersList.innerHTML = ''; // 清空现有内容以便重新填充

        orders.forEach(order => {
            const row = document.createElement('tr');
            row.innerHTML = `
          <td>${order.user_name}</td>
          <td>${order.createTime}</td>
          <td>${order.endTime}</td>
          <td>${order.destination}</td>
          <td class="order-status">${order.status}</td>
          <td>
              <button onclick="acceptOrder(${order.order_id})">接单</button>
              <button onclick="rejectOrder(${order.order_id})">拒单</button>
          </td>
        `;
            if (order.status === '已接单,订单完成') {
                row.querySelector('.order-status').style.color = 'green';
                //同时隐藏接单按钮
                row.querySelector('td:last-child').style.display = 'none';
            } else if (order.status === '商家已拒单') {
                row.querySelector('.order-status').style.color = '#4e5254';
                row.querySelector('td:last-child').style.display = 'none';
            }else {
                row.querySelector('.order-status').style.color = 'red';
            }
            ordersList.appendChild(row);
        });

    }



    function acceptOrder(order_id){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', `http://localhost:8080/keeper/order/acceptOrder/`+order_id, true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            }
        };
        xhr.send();
        window.location.reload()
    }


    function rejectOrder(order_id){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', `http://localhost:8080/keeper/order/rejectOrder/`+order_id, true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            }
        };
        xhr.send();
        window.location.reload()
    }


    // 初始化页面时获取总订单列表
    fetchOrdersList();
</script>
</body>
</html>
